<template>
	<view class="container">
		<tui-tabs
			:tabs="tabs"
			:isFixed="scrollTop>=0"
			:currentTab="currentTab"
			selectedColor="#E41F19"
			sliderBgColor="#E41F19"
			@change="change"
			itemWidth="50%">
		</tui-tabs>
		<view class="" v-if="dataList.length">
			<order-item v-for="item in dataList" :isComment='currentTab' :key="item.id" :data="item" @toProduct='doToProduct' @toComment='doToComment'></order-item>
			<view class="loading-more" v-if="loading || nomore">
				{{ loading ? '加载中...' : '没有更多了' }}
			</view>
		</view>
		<view class="mt20" v-else>
		  <tui-no-data :fixed="false" imgUrl="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/img_noorder_3x.png">暂无订单</tui-no-data>
		</view>
	</view>
</template>

<script>
	import OrderItem from './components/orderItem.vue'
	
	export default {
		components: {
			OrderItem
		},
		data() {
			return {
				tabs: [
					{
					  name: "待评价",
					  value: 0,
					},
					{
					  name: "已评价",
					  value: 1,
					}
				],
				currentTab: 0,
				dataList: [],
				pagination: {
					pageSize: 10,
					pageNum: 1
				},
				loading: false,
				nomore: false
			};
		},
		onLoad() {
			this.getDatas()
		},
		methods: {
			change(e) {
				this.currentTab = e.index;
				this.pagination.pageNum = 1;
				this.nomore = false;
				this.loading = false;
				this.getDatas();
			},
			async getDatas() {
				const { pageSize, pageNum } = this.pagination
				const params = {
					isComment: this.currentTab,
					customerId: this.$store.state.customerId,
					merchantId: this.$store.state.merchantId,
					pageNum,
					pageSize,
				}
				const { data } = await this.$api.getCommentOrders(params)
				if (pageNum === 1) {
					this.dataList = data
				} else {
					this.dataList = this.dataList.concat(data)
				}
				if (!data || !data.length) {
					this.nomore = true;
				}
				this.loading = false;
			},
			doToProduct(d) {
				uni.navigateTo({
					url: `/pagesB/productDetail/productDetail?productCode=${d.productId}`
				})
			},
			doToComment(d) {
				// console.log(d)
				uni.navigateTo({
				  url: `/pagesB/comment/comment?productCode=${d.productId}&orderId=${d.orderId}&productItemId=${d.productItemId}`,
				});
			}
		},
		onReachBottom() {
			this.pagination.pageNum++
			this.loading = true;
			this.getDatas();
		}
	}
</script>

<style lang="scss">
.loading-more {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80rpx;
	color: #b1b1b1;
	font-size: 26rpx;
}
</style>
